import Vue from "vue";
import { BasicThematicLayer } from "../../utils/BasicThematicLayer";
import CircleLayer from "./components/circleIndex.vue";
export class CircleLayerCom extends BasicThematicLayer {
  /**
   * @param {object} options
   * @param {any} options.map
   */
  map = null;
  circleLayer = null; // 组件实例
  constructor(options) {
    super(options);
    this.circleLayerClickListener = this.circleLayerClickFn.bind(this);
    this.map = options.map;

    // 注册地图点击事件，在控制台打印当前点击的地图坐标
    const mapClickFn = (e) => {
      console.log(e.lngLat, "当前点击的地图坐标");
    };
    const mapClickMapEvent = [{
      type: "click",
      listener: mapClickFn,
    }];
    this.addLayerEvents(mapClickMapEvent);

    this.createCircleBasicThematicLayerCom(this);
    // this.on("successAddLayer", (val) => {
      // console.log("successAddCircleLayer-classParent", val);
    // });
    // this.on("addLayerEvents", (val) => {
    //   console.log(val, "circleLayerClick-mapEvent");
    // });
  }

  createCircleBasicThematicLayerCom(self) {
    let circleLayer = Vue.extend(CircleLayer);
    this.circleLayer = new circleLayer({
      methods: {
        getSelf() {
          return self;
        },
      },
    }).$mount(document.createElement("div"));
    document.getElementById("map").appendChild(self.circleLayer.$el);
  }

  circleLayerClickFn = (e) => {
    console.log(e, "circleLayerClickFn-callback");
  };
  addCircleLayer(data) {
    this.addSource(data.id, data.source);
    this.addLayers([
      {
        id: data.id,
        type: "circle",
        source: data.id,
        paint: data.paint,
        minzoom: data.minzoom,
      },
    ]);
    this.map.setCenter({ lng: -108.23523477462254, lat: 32.8804697621884 });
    const circleLayerClickMapEvent = [{
      type: "click",
      layerId: data.id,
      listener: this.circleLayerClickListener,
    }];
    this.addLayerEvents(circleLayerClickMapEvent);
  }

  removeCircleLayer(layerIds) {
    this.removeLayerEvents([{
      type: "click",
      layerId: "circleLayer"
    }]);
    this.removeLayers();
    this.removeSource();
  }

  showAllCircleLayers() {
    this.showLayers();
  }

  hideAllCircleLayers() {
    this.hideLayers();
  }

  addLocateImg() {
    this.addImages([{ name: "blackImg", url: require("../../assets/images/black.png") }], (iamgePromises) => {
    // this.addImages([{ name: "black", url: "https://docs.mapbox.com/mapbox-gl-js/assets/cat.png" }], (iamgePromises) => {
        let sourceData = {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [-91.874, 42.76],
                },
              },
            ],
          },
        };
        this.addSource("blackImgSourceId", sourceData);
        // Add a layer to use the image to represent the data.
        let layerData = {
          id: 'blackImgLayerId',
          type: 'symbol',
          source: 'blackImgSourceId', // reference the data source
          layout: {
            'icon-image': 'blackImg', // reference the image
            'icon-size': 0.25,
          },
        }
        this.addLayers([
          layerData,
        ])
    })
  }

  removeComponents() {
    this.emit("removeComponents");
  }

  hideComponents() {
    this.emit("hideComponents")
  }
}
